<!-- 下拉选择框 -->
<template>
  <PickerField
    v-model="value"
    :field-props="{
      label: labelInfo.show ? labelInfo.label : '',
      placeholder: '可选择',
    }"
    :remote="filterable"
    :multiple="multiple"
    :title="labelInfo.label"
    :columns="options"
    :columns-field-names="{
      text: 'label',
      value: 'value',
    }"
    @change="onChange"
    @confirm="onConfirm"
  >
  </PickerField>
</template>

<script setup>
// import gongChengSJJApi from "@/api/juecefxpt/gongChengSJJ/index";
import { isEqual } from "lodash";
import { computed, watch, ref, defineProps, defineOptions } from "vue";
import { PickerField } from "@mdfe/vant";

defineOptions({
  name: "LayoutSelect",
});

const props = defineProps({
  componentStyle: {
    type: Object,
    default: () => {},
  },
});

const multiple = computed(() => {
  if (props.componentStyle?.advancedType) {
    return props.componentStyle.advancedType === "multiple";
  }
  return false;
});

// 是否可以输入筛选
const filterable = computed(() => {
  if (props.componentStyle?.advancedType) {
    return props.componentStyle.advancedIsInput === true;
  }
  return false;
});

const value = ref();
const options = ref([]);
const oldAdvancedDataSource = ref(""); // 旧数据

const labelInfo = computed(() => {
  if (props.componentStyle?.title) {
    return {
      label: props.componentStyle.title.text,
      show: props.componentStyle.title.show,
    };
  }
  return { label: "下拉框", show: true };
});

function onChange(value) {
  console.log(value);
}

function onConfirm(value) {
  console.log(value);
}

// 获取默认值数据
function getDefaultOptions(advancedDataSource) {
  const { sourceNextValue, sourceNextValueId } = advancedDataSource;
  const ziDuanMS = sourceNextValue;
  const params = {
    gongChengSJJID: sourceNextValueId,
    ziDuanMS: ziDuanMS,
  };
  gongChengSJJApi.getAllValueByCZNRAndZDMS(params).then((res) => {
    if (res && res.length) {
      options.value = res.map((item) => {
        return {
          label: item,
          value: item,
        };
      });
    }
  });
}
</script>
<style lang="scss" scoped>
// @include c('layout-select', $md-prefix) {
//   display: flex;
//   align-items: center;
//   padding: 8px;

//   @include e('label') {
//     color: #333333;
//     font-size: 14px;
//     line-height: 20px;
//     font-family: PingFang SC;
//     margin-right: 8px;
//   }
// }
</style>
